﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License

Name       : Plain & Clean
   
Description: A two-column, fixed-width design with dark color scheme.
Version    : 1.0
Released   : 20111024

-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Manage layouts</title>
    <link href="style.css" rel="stylesheet" type="text/css" media="screen" />
    <script type="text/javascript" language="javascript" src="scripts/jquery-1.4.1-vsdoc.js"></script>
    <style type="text/css">
        #name
        {
            width: 292px;
        }
        #xml
        {
            height: 408px;
        }
        label
        {
            padding: 0px 20px 0px 10px;
            display: block;
            float: left;
            width: 50px;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="header" class="container">
            <div id="logo">
                <h1>
                    <a href="#">Manage Layouts </a>
                </h1>
                <p>
                    Add new</a></p>
            </div>
            <div id="menu">
                <ul>
                    <li class="current_page_item"><a href="index.htm">Layout list</a></li>
                    <li><a href="EditLayout.htm">Add New</a></li>
                </ul>
            </div>
        </div>
        <div style="clear: both;">
            &nbsp;</div>
        <!-- end #header -->
        <div id="page" class="container">
            <div>
                <p>
                    <label for="name">
                        Name:</label>
                    <input id="name" name="name" type="text" />
                </p>
                <p>
                    <label for="type">
                        Type:</label>
                    <select id="type">
                        <option>Character</option>
                        <option>Special Key</option>
                    </select>
                </p>
                <p id="ptext">
                    <label for="text">
                        Text:</label>
                    <input id="text" name="text" type="text" />
                </p>
                <p id="pKey">
                    <label for="key">
                        Key:</label>
                    <select id="key">
                        <option>VK_LBUTTON</option>
                        <option>VK_RBUTTON</option>
                        <option>VK_CANCEL</option>
                        <option>VK_MBUTTON</option>
                        <option>VK_BACK</option>
                        <option>VK_TAB</option>
                        <option>VK_CLEAR</option>
                        <option>VK_RETURN</option>
                        <option>VK_SHIFT</option>
                        <option>VK_CONTROL</option>
                        <option>VK_MENU</option>
                        <option>VK_PAUSE</option>
                        <option>VK_CAPITAL</option>
                        <option>VK_KANA</option>
                        <option>VK_HANGUL</option>
                        <option>VK_JUNJA</option>
                        <option>VK_FINAL</option>
                        <option>VK_HANJA</option>
                        <option>VK_KANJI</option>
                        <option>VK_ESCAPE</option>
                        <option>VK_CONVERT</option>
                        <option>VK_NONCONVERT</option>
                        <option>VK_ACCEPT</option>
                        <option>VK_MODECHANGE</option>
                        <option>VK_SPACE</option>
                        <option>VK_PRIOR</option>
                        <option>VK_NEXT</option>
                        <option>VK_END</option>
                        <option>VK_HOME</option>
                        <option>VK_LEFT</option>
                        <option>VK_UP</option>
                        <option>VK_RIGHT</option>
                        <option>VK_DOWN</option>
                        <option>VK_SELECT</option>
                        <option>VK_PRINT</option>
                        <option>VK_EXECUTE</option>
                        <option>VK_SNAPSHOT</option>
                        <option>VK_INSERT</option>
                        <option>VK_DELETE</option>
                        <option>VK_HELP</option>
                        <option>VK_LWIN</option>
                        <option>VK_RWIN</option>
                        <option>VK_APPS</option>
                        <option>VK_SLEEP</option>
                        <option>VK_NUMPAD0</option>
                        <option>VK_NUMPAD1</option>
                        <option>VK_NUMPAD2</option>
                        <option>VK_NUMPAD3</option>
                        <option>VK_NUMPAD4</option>
                        <option>VK_NUMPAD5</option>
                        <option>VK_NUMPAD6</option>
                        <option>VK_NUMPAD7</option>
                        <option>VK_NUMPAD8</option>
                        <option>VK_NUMPAD9</option>
                        <option>VK_MULTIPLY</option>
                        <option>VK_ADD</option>
                        <option>VK_SEPARATOR</option>
                        <option>VK_SUBTRACT</option>
                        <option>VK_DECIMAL</option>
                        <option>VK_DIVIDE</option>
                        <option>VK_F1</option>
                        <option>VK_F2</option>
                        <option>VK_F3</option>
                        <option>VK_F4</option>
                        <option>VK_F5</option>
                        <option>VK_F6</option>
                        <option>VK_F7</option>
                        <option>VK_F8</option>
                        <option>VK_F9</option>
                        <option>VK_F10</option>
                        <option>VK_F11</option>
                        <option>VK_F12</option>
                        <option>VK_F13</option>
                        <option>VK_F14</option>
                        <option>VK_F15</option>
                        <option>VK_F16</option>
                        <option>VK_F17</option>
                        <option>VK_F18</option>
                        <option>VK_F19</option>
                        <option>VK_F20</option>
                        <option>VK_F21</option>
                        <option>VK_F22</option>
                        <option>VK_F23</option>
                        <option>VK_F24</option>
                        <option>VK_NUMLOCK</option>
                        <option>VK_SCROLL</option>
                        <option>VK_OEM_NEC_EQUAL</option>
                        <option>VK_OEM_FJ_JISHO</option>
                        <option>VK_OEM_FJ_MASSHOU</option>
                        <option>VK_OEM_FJ_TOUROKU</option>
                        <option>VK_OEM_FJ_LOYA</option>
                        <option>VK_OEM_FJ_ROYA</option>
                        <option>VK_LSHIFT</option>
                        <option>VK_RSHIFT</option>
                        <option>VK_LCONTROL</option>
                        <option>VK_RCONTROL</option>
                        <option>VK_LMENU</option>
                        <option>VK_RMENU</option>
                        <option>VK_BROWSER_BACK</option>
                        <option>VK_BROWSER_FORWARD</option>
                        <option>VK_BROWSER_REFRESH</option>
                        <option>VK_BROWSER_STOP</option>
                        <option>VK_BROWSER_SEARCH</option>
                        <option>VK_BROWSER_FAVORITES</option>
                        <option>VK_BROWSER_HOME</option>
                        <option>VK_VOLUME_MUTE</option>
                        <option>VK_VOLUME_DOWN</option>
                        <option>VK_VOLUME_UP</option>
                        <option>VK_MEDIA_NEXT_TRACK</option>
                        <option>VK_MEDIA_PREV_TRACK</option>
                        <option>VK_MEDIA_STOP</option>
                        <option>VK_MEDIA_PLAY_PAUSE</option>
                        <option>VK_LAUNCH_MAIL</option>
                        <option>VK_LAUNCH_MEDIA_SELECT</option>
                        <option>VK_LAUNCH_APP1</option>
                        <option>VK_LAUNCH_APP2</option>
                        <option>VK_OEM_1</option>
                        <option>VK_OEM_PLUS</option>
                        <option>VK_OEM_COMMA</option>
                        <option>VK_OEM_MINUS</option>
                        <option>VK_OEM_PERIOD</option>
                        <option>VK_OEM_2</option>
                        <option>VK_OEM_3</option>
                        <option>VK_OEM_4</option>
                        <option>VK_OEM_5</option>
                        <option>VK_OEM_6</option>
                        <option>VK_OEM_7</option>
                        <option>VK_OEM_8</option>
                        <option>VK_OEM_AX</option>
                        <option>VK_OEM_102</option>
                        <option>VK_ICO_HELP</option>
                        <option>VK_ICO_00</option>
                        <option>VK_PROCESSKEY</option>
                        <option>VK_ICO_CLEAR</option>
                        <option>VK_PACKET</option>
                        <option>VK_OEM_RESET</option>
                        <option>VK_OEM_JUMP</option>
                        <option>VK_OEM_PA1</option>
                        <option>VK_OEM_PA2</option>
                        <option>VK_OEM_PA3</option>
                        <option>VK_OEM_WSCTRL</option>
                        <option>VK_OEM_CUSEL</option>
                        <option>VK_OEM_ATTN</option>
                        <option>VK_OEM_FINISH</option>
                        <option>VK_OEM_COPY</option>
                        <option>VK_OEM_AUTO</option>
                        <option>VK_OEM_ENLW</option>
                        <option>VK_OEM_BACKTAB</option>
                        <option>VK_ATTN</option>
                        <option>VK_CRSEL</option>
                        <option>VK_EXSEL</option>
                        <option>VK_EREOF</option>
                        <option>VK_PLAY</option>
                        <option>VK_ZOOM</option>
                        <option>VK_NONAME</option>
                        <option>VK_PA1</option>
                        <option>VK_OEM_CLEAR</option>
                    </select>
                </p>
                <p id="pChar">
                    <label for="value">
                        Character:</label>
                    <input id="value" name="text" type="text" />
                </p>
            </div>
            <div>
                <input id="add" type="button" value="Add Row" />
                <input id="btnSend" type="button" value="Save" />
            </div>
            <div id="main">
            </div>
        </div>
        <!-- end #page -->
    </div>
    <div id="footer">
        <p>
            Copyright (c) 2011 Sitename.com. All rights reserved. Design by <a href="http://www.freecsstemplates.org/">
                Free CSS Templates</a>.</p>
    </div>
    <!-- end #footer -->
</body>
<script type="text/javascript">

    function htmlEncode(value) {
        return $('<div/>').text(value).html();
    }

    function htmlDecode(value) {
        return $('<div/>').html(value).text();
    }

    index = 0;
    var itemIndexes = new Array();

    function GetItem() {

        var item = new Object();
        item.text = htmlEncode($("#text").val());

        if ($("#type").val() == "Character") {
            item.value = htmlEncode($("#value").val());
        } else {
            item.value = htmlEncode($("#key").val());
        }

        return item;
    }

    function CreateItemNode(rowIndex) {
        var item = GetItem();
        itemIndexes[rowIndex]++;
        itemIndex = itemIndexes[rowIndex];

        var node = $("<input " +
                    "id=\"btn" + rowIndex + "x" + itemIndex + "\" " +
                    "name=\"" + rowIndex + "x" + itemIndex + "\" " +
                    "type=\"button\" " +
                    "value=\"" + item.text + "\"/>");
        node.attr("btnValue", item.value);
        node.attr("btnText", item.text);
        return $("<span />").append(node);
    }

    function CreateRowNode() {
        index++;
        itemIndexes[index] = 0;
        return "<p id=\"p" + index + "\">" +
                        "<input id=\"d" + index + "\" name=" + index + " type=\"button\" value=\"Delete\"/>" +
                        "<input id=\"b" + index + "\" name=" + index + " type=\"button\" value=\"Add item\"/>:" +
                   "</p>";
    }

    ////////////
    // Init
    //
    $(document).ready(function () {

        //////////////
        // Send button
        //
        $("#btnSend").click(function (event) {
            var root = $('<rc />');
            var table = $('<table />');
            root.append(table);
            $("#main p").each(function (index, p) {
                var row = $('<row />');
                $("span", p).each(function (index2, span) {
                    var button = $('<button />');
                    var i = $("input", span);
                    button.attr("text", i.attr("btnText"));
                    button.attr("key", i.attr("btnValue"));
                    row.append(button);
                });
                table.append(row);
            });

            var data = new Object();
            data.id = null;
            data.name = $("#name").val();
            data.text = $('<div />').append(root).html();

            $.ajax({
                contentType: 'application/json',
                data: JSON.stringify(data),
                dataType: 'json',
                success: function (data2) {
                    window.location.href = window.location.href;
                },
                error: function () {
                    alert("Update Failed");
                },
                processData: false,
                type: 'PUT',
                url: location.origin + '/jersey-webapp/webresources/layouts/'
            });
        });

        /////////////////////////////////////
        // Disable not used elements by type
        //
        $("#pKey").hide();
        $("#type").change(function (event) {
            if (this.value == "Character") {
                $("#pChar").show();
                $("#pKey").hide();
            } else {
                $("#pKey").show();
                $("#pChar").hide();
            }
        });

        /////////////////
        // New Row Button
        //
        $("#add").click(function (event) {
            $("#main").append(CreateRowNode());

            ///////////////
            // Add new item
            //
            $("#b" + index).click(function (event) {
                rowIndex = parseInt(event.target.name);
                $("#p" + rowIndex).append(CreateItemNode(rowIndex));
                itemIndex = itemIndexes[rowIndex];

                ///////////////
                // Delete Item
                //
                $("#btn" + rowIndex + "x" + itemIndex).click(function (event) {
                    var t = this.name.split("x");
                    rowIndex = t[0];
                    itemIndex = t[1];
                    $("#btn" + rowIndex + "x" + itemIndex).remove();
                });
            });

            //////////////
            // Delete Row
            //
            $("#d" + index).click(function (event) {
                rowIndex = this.name;
                $("#p" + rowIndex).remove();
            });
        });
    });

</script>
</html>
